import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';

import SizeUtils from '../../common/SizeUtils';
import ToastUtils from '../../common/ToastUtils';
import Config from '../../config';
import BaseComponent from '../common/BaseComponent';
import TImage from '../../components/TImage';
import CommonShowViewFullScreenAction from '../../actions/common/CommonShowViewFullScreenAction';
import {DateUtils} from '../../utils/Utils';
import CommonCheckUserTypeAction from '../../actions/common/CommonCheckUserTypeAction';
import UserRequestAPPConfigAction from '../../actions/user/UserRequestAPPConfigAction';

// const BUTTONS = [
//   {key:"guahao", source:require("../../../resource/images/usual/icon_guahao.png"),
//     text:"快捷挂号", style:{width:125,height:126}, page:Config.pages.guahao_main, needLogin:true, needVerify:false},
//   {key:"sport", source:require("../../../resource/images/usual/icon_sport.png"),
//     text:"健康运动", style:{width:125,height:126}, page:Config.pages.sport_main, needLogin:true, needVerify:false},
//   {key:"youhui", source:require("../../../resource/images/usual/icon_youhui.png"),
//     text:"会员服务卡", style:{width:125,height:125}, page:Config.pages.vipsercard_content, needLogin:true, needVerify:false},
//   {key:"jifen", source:require("../../../resource/images/usual/jifen.png"),
//     text:"积分商城", style:{width:125,height:126}, page:Config.pages.jifenmall_main_page, needLogin:true, needVerify:false},
//   {key:"jifen", source:require("../../../resource/images/usual/shuwu.png"),
//     text:"电子书屋", style:{width:125,height:126}, page:Config.pages.shuwu_main, needLogin:true, needVerify:true},
// ]

//常用
export default class UsualView extends BaseComponent {
  constructor(props) {
    super(props);

    this._interval = null;

    this.state.date = new Date();
    this.state.configDataDic = {
      "usual_view_buttons":{
      },
    };
  }
    // {paddingTop:40,
    // height:960,
    // button:[
    //   {key:"guahao", icon:{uri:"http://dqapp.oss-cn-beijing.aliyuncs.com/app_resouce/images/icon_guahao%402x.png"},
    //     text:"快捷挂号", width:125, height:126, goto:"guahao_main", needLogin:true, needVerify:false},
    //   {key:"sport", icon:{uri:"http://dqapp.oss-cn-beijing.aliyuncs.com/app_resouce/images/icon_sport%402x.png"},
    //     text:"健康运动", width:125, height:126, goto:"sport_main", needLogin:true, needVerify:false},
    //   {key:"youhui", icon:{uri:"http://dqapp.oss-cn-beijing.aliyuncs.com/app_resouce/images/icon_youhui%402x.png"},
    //     text:"会员服务卡", width:125, height:125, goto:"vipsercard_content", needLogin:true, needVerify:false},
    //   {key:"jifen", icon:{uri:"http://dqapp.oss-cn-beijing.aliyuncs.com/app_resouce/images/jifen%402x.png"},
    //     text:"积分商城", width:125, height:126, goto:"jifenmall_main_page", needLogin:true, needVerify:false},
    //   {key:"jifen", icon:{uri:"http://dqapp.oss-cn-beijing.aliyuncs.com/app_resouce/images/shuwu%403x.png"},
    //     text:"电子书屋", width:125, height:126, goto:"shuwu_main", needLogin:true, needVerify:true},
    // ]}

  componentDidMount() {
    this._interval = setInterval(this._updateInterval.bind(this), 1000);
    this._requestData();
  }

  componentWillUpdate(nextProps, nextState) {
    super.componentWillUpdate(nextProps, nextState);

    if(nextProps.updateMark != this.props.updateMark) {
      this._requestData();
    }
    if(nextState.configSuccess === true && nextState.configData.key === "usual_view_buttons") {
      nextState.configSuccess = false;
      nextState.configDataDic["usual_view_buttons"] = JSON.parse(nextState.configValue);
    }
  }

  _requestData() {
    new UserRequestAPPConfigAction().call(this, {key:"usual_view_buttons",requestType:"config"});
  }

  _updateInterval() {
    this.setState({
      date: new Date(),
    })
  }

  componentWillUnmount() {
    if(this._interval) {
      clearInterval(this._interval);
      this._interval = null;
    }
    this.state.date = null;
  }

  render(){
    return (
      <View style={{position:"absolute", top:0,
        width:SizeUtils.getWindowSize().width,
        height:SizeUtils.getWindowSize().height, backgroundColor:"#ffffffee"}}>
        {this._renderDate()}
        {this._renderButtons()}
        {this._renderCloseButton()}
      </View>
    )
  }

  _renderDate() {
    return (
      <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(80),
          paddingLeft:SizeUtils.translateDesignWidthToCode(50), flexDirection:"row",
          alignItems:"center",
          }}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(90)}}>
            {this.state.date.getDate()}
          </Text>
          <View style={{flexDirection:"column", paddingLeft:SizeUtils.translateDesignWidthToCode(24)}}>
            <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28)}}>
              {(this.state.date.getMonth() + 1) + "/" + this.state.date.getFullYear()}
            </Text>
            <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), paddingTop:SizeUtils.translateDesignHeightToCode(12)}}>
              {DateUtils.getWeekName(this.state.date.getDay())}
            </Text>
          </View>
          <View style={{paddingLeft:SizeUtils.translateDesignWidthToCode(30),
              flexDirection:"row", alignItems:"center"}}>
            <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30)}}>
              {DateUtils.transIntToStr(this.state.date.getHours()) + ":" +
                DateUtils.transIntToStr(this.state.date.getMinutes()) + ":" +
                DateUtils.transIntToStr(this.state.date.getSeconds())}
            </Text>
          </View>
      </View>
    )
  }

  _renderButtons() {
    if(this.state.configDataDic.usual_view_buttons.button === undefined) {
      return;
    }
    return (
      <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(this.state.configDataDic.usual_view_buttons.paddingTop),
          width:SizeUtils.getWindowSize().width,
          height:SizeUtils.translateDesignHeightToCode(this.state.configDataDic.usual_view_buttons.height),
          flexDirection:"column", justifyContent:"space-around", alignItems:"center"}}>
          {this.state.configDataDic.usual_view_buttons.button.map((buttonData, index) => {
            return this._renderButton(buttonData, index);
          })}
      </View>
    )
  }

  _renderButton(buttonData, index) {
    return (
      <TouchableOpacity style={{}} key={index} onPress={() => this._onPressButton(buttonData)}>
        <View style={{flexDirection:"column" , alignItems:"center"}}>
          <TImage source={buttonData.icon} style={{width:buttonData.width, height:buttonData.height}}/>
          <Text style={{paddingTop:SizeUtils.translateDesignHeightToCode(10), textAlign:'center',
              fontSize:SizeUtils.translateFontSizeToCode(26)}}>
            {buttonData.text}
          </Text>
        </View>
      </TouchableOpacity>
    )
  }

  _renderCloseButton() {
    return (
      <TouchableOpacity style={{position:"absolute", bottom:SizeUtils.translateDesignHeightToCode(60),
          width:SizeUtils.getWindowSize().width, flexDirection:"row", justifyContent:"center"}}
          onPress={this._onPressClose.bind(this)}>
        <TImage source={require("../../../resource/images/usual/icon_close.png")} style={{
          width:66, height:66,
        }}/>
      </TouchableOpacity>
    )
  }

  _onPressButton(buttonData) {
    if(buttonData.isClose === true) {
      if(btnData.closeMessage != undefined) {
        ToastUtils.show(btnData.closeMessage);
      }
      else {
        ToastUtils.show("功能暂未开放");
      }
      return;
    }
    if(buttonData.needLogin === true || buttonData.needVerify === true) {
      new CommonCheckUserTypeAction().call(this.caller,
        {needLogin:buttonData.needLogin === true ? true : false, needVerify:buttonData.needVerify === true ? true : false},
          (result) => this._onCheckUserTypeCallback(result, buttonData)
      );
    }
    else {
      this._onCheckUserTypeCallback(true, buttonData);
    }
  }

  _onCheckUserTypeCallback(result, buttonData) {
    if(result === true) {
      if(buttonData.goto != undefined) {
        this._onPressClose();
        this.props.page.gotoPage(Config.getPageDataByKey(buttonData.goto));
      }
      else {
        ToastUtils.show("功能暂未开放");
      }
    }
  }

  _onPressClose() {
    new CommonShowViewFullScreenAction().call(this, null);
  }
}
